<template>
    <div class="tab">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-tab item-content"
        mode="horizontal"
        @select="handleSelect"
      >
        <template v-for=" (item, index) in lists" > 
            <el-menu-item v-if="index < 6" :index="item.channelId"  :key="item.channelId">{{item.channelName}}</el-menu-item>
        </template>
      </el-menu>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeIndex: '',
            channels: []
        }
    },
    props: {
        tabs: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        lists() {
            return this.tabs
        }
    },
    mounted() {
        this.activeIndex = this.lists[0].channelId + ''
    },
    methods: {
        handleSelect(index) {
            this.activeIndex = index
            this.$emit('selectTab',index)
        }
    }
}
</script>
<style lang="scss" scoped>
$bg: #3582b7;
.tab {
  background: $bg;
}
.el-menu-tab {
  background: inherit;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  border: none;
  .el-menu-item {
    background: inherit !important;
    color: inherit !important;
    border: none !important;
    &:hover {
      background: #186da7 !important;
      color: #fff;
    }
  }
  .is-active {
    color: inherit;
    background: #186da7 !important;
    border: none;
  }
}
</style>